- page_title s_('BackgroundMigrations|Background migrations')
- @breadcrumb_link = admin_background_migrations_path(database: params[:database])
- learnmore_link = help_page_path('update/background_migrations.md')
- learnmore_link_start = '<a href="%{url}" target="_blank" rel="noopener noreferrer">'.html_safe % { url: learnmore_link }
- page_description = html_escape(s_('BackgroundMigrations|Background migrations are used to perform data migrations when a migration exceeds the time limits set by GitLab. %{linkStart}Learn more%{linkEnd}')) % { linkStart: learnmore_link_start, linkEnd: '</a>'.html_safe }


= render ::Layouts::PageHeadingComponent.new(s_('BackgroundMigrations|Background migrations'),
  description: page_description,
  options: { data: { event_tracking_load: 'true', event_tracking: 'view_admin_background_migrations_pageload' } })

= gl_tabs_nav do
  = gl_tab_link_to admin_background_migrations_path({ tab: nil, database: params[:database] }), item_active: @current_tab == 'queued' do
    = _('Queued')
    = gl_tab_counter_badge limited_counter_with_delimiter(@relations_by_tab['queued'])
  = gl_tab_link_to admin_background_migrations_path({ tab: 'finalizing', database: params[:database] }), item_active: @current_tab == 'finalizing' do
    = _('Finalizing')
    = gl_tab_counter_badge limited_counter_with_delimiter(@relations_by_tab['finalizing'])
  = gl_tab_link_to admin_background_migrations_path({ tab: 'failed', database: params[:database] }), item_active: @current_tab == 'failed' do
    = _('Failed')
    = gl_tab_counter_badge limited_counter_with_delimiter(@relations_by_tab['failed'])
  = gl_tab_link_to admin_background_migrations_path({ tab: 'finished', database: params[:database] }), item_active: @current_tab == 'finished' do
    = _('Finished')
    = gl_tab_counter_badge limited_counter_with_delimiter(@relations_by_tab['finished'])
  - if @databases.size > 1
    #js-database-listbox{ data: { databases: @databases, selected_database: @selected_database } }

.tab-content.gl-tab-content.gl-pt-0
  - if @migrations.any?
    .tab-pane.active{ role: 'tabpanel' }
      %table.table.b-table.gl-table.b-table-stacked-md.gl-table-no-top-border.gl-mb-7
        %thead
          %tr{ role: 'row' }
            %th.border-bottom{ role: 'cell' }= _('Migration')
            %th.border-bottom{ role: 'cell' }= _('Progress')
            %th.border-bottom{ role: 'cell' }= _('Status')
            %th.border-bottom{ role: 'cell' }= _('Actions')
        %tbody
          = render partial: 'migration', collection: @migrations
    = paginate_collection @migrations
  - else
    = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-milestone-md.svg',
      title: s_('BackgroundMigrations|No background migrations'))
